<template>
    <view class="content">
        <view class="">
            图片地址: {{imageSrc}}
        </view>
        <image :src="imageSrc"></image>

        <button @click="singUpload" class="">
            单个文件上传
        </button>

        <block v-for="(item,index) in imageSrcs" :key="index">
            <image :src="item"></image>
        </block>

        <button @click="multipleUpload" class="">
            多个文件上传
        </button>

    </view>
</template>

<script>
    import {
        hashFile,
        getFilesMd5,
        getFileSignature
    } from 'ift-util'

    export default {
        data() {
            return {
                imageSrcs: ['https://img.yzcdn.cn/vant/cat.jpeg'],
                imageSrc: 'https://img.yzcdn.cn/vant/cat.jpeg',
                singUploadUrl: "https://dev-ftecard.aijiatui.com/gov-file-upload/security/single-upload",
                multipleUploadUrl: "https://dev-ftecard.aijiatui.com/gov-file-upload/security/batch-upload"
            }
        },
        onLoad() {

        },
        methods: {
            singUpload() {
                // 选择图片文件
                uni.chooseFile({
                    count: 1,
                    type: 'all',
                    success: async res => {
                        const file = res.tempFiles[0]
                        console.log(file);
                        // const fileType = file.name.split(".")[1]; // 文件会有多层.名称, 如，测试.dfa.dad.ae.jpg
                        const fileType = file.name.slice(file.name.lastIndexOf('.') + 1);
                        const r = await getFileSignature(file, fileType);
                        // const md5 = await hashFile(file)
                        // console.log(r, md5);
                        const form = new FormData();
                        form.append("file", file)
                        let options = this.getOption(r, form)
                        const imgData = await fetch(this.singUploadUrl, options);
                        const data = await imgData.json();
                        console.log(data.data.fileUrls[0]);
                        this.imageSrc = data.data.fileUrls[0]
                    }
                })
            },

            multipleUpload() {
                // 选择图片文件
                uni.chooseFile({
                    count: 10,
                    type: 'all',
                    success: async res => {
                        const files = res.tempFiles
                        console.log(files);
                        // const fileType = files[0].name.split(".")[1];
                        const fileType = file[0].name.slice(file[0].name.lastIndexOf('.') + 1);
                        const md5 = await getFilesMd5(files)
                        const r = await getFileSignature("", fileType, md5);
                        const form = new FormData();
                        const temp = []
                        for (const file of files) {
                            form.append("files", file)
                        }
                        // form.append("files", files)
                        form.append("fileType", fileType);
                        let options = this.getOption(r, form)
                        const imgData = await fetch(this.multipleUploadUrl, options);
                        const data = await imgData.json();
                        console.log(data.data.fileUrls);
                        this.imageSrcs = data.data.fileUrls
                    }
                })
            },
            getOption(r, form) {
                return {
                    headers: {
                        "i-token": "919e1e8b6a3746e3b2b46f7feb5ca85a",
                        "i-log-endPoint": "docking", // 不加密
                        "ifutian-timestamp": r["ifutian-timestamp"],
                        "ifutian-nonce": r["ifutian-nonce"],
                        "ifutian-signature": r["ifutian-signature"],
                        "i-temp-izone": "mq",
                    }, // 设置请求头
                    method: "post",
                    body: form,
                };
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>